<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tips{
            height: 45px;
            line-height: 45px;
            border: 1px solid #333;
            font-size: 14px;
            padding: 0 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="tips">
        <!-- 距离双12剁手还有xx天xx时xx分xx秒 -->
    </div>
</body>
<script>

    var tips = document.getElementById("tips");

    var future = new Date(2021,10,11);
    console.log(future);

    var now = new Date();
    console.log(now);

    var time = 3601;
    console.log(time);
    if(time>0){  // 未来时间 > 当前时间
        var day = parseInt(time / (60 * 60 * 24));
        var hour = parseInt(time / (60 * 60)) % 24;
        var minute = parseInt(time / 60) % 60;
        var second = time % 60;
        console.log(day,hour,minute,second);

        // 距离双12剁手还有xx天xx时xx分xx秒
        // tips.innerText = "距离双12剁手还有:"+ day + "天" + hour + "时" + minute + "分" + second + "秒";

        // ES6 模板字符串  可以借助插值语句${} => 拼接变量和执行简单表达式
        // tips.innerText = `距离双12剁手还有${day}天${hour}时${minute}分${ second }秒`;
        tips.innerText = `距离双12剁手还有${day}天${hour < 10 ? "0"+hour : hour}时${minute < 10 ? "0"+minute : minute}分${second < 10 ? "0"+second : second }秒`;


    }else{ //倒计时结束
        tips.innerText = "双11开始";
    }

    

</script>
</html>